
<link rel="stylesheet" type="text/css" href="../../resources/jquery/themes/icon.css">
<link href="../css/content.css" rel="stylesheet">

<script src="../global.js"></script>
<script src="AuthoritiesView.js"></script>
<script src="AuthoritiesService.js"></script>

<div class="container">
	<div class="page-header">
		<h1>Authorities Manager</h1>
	</div>
	<div class="easyui-layout" style="width: 100%; height: 508px;">
		<div data-options="region:'west',split:true" title="条目"
			style="width: 46%; padding: 0;">
			<div class="easyui-layout" data-options="fit:true">
				<div data-options="region:'north'"
					style="height: 34px; width: 100%; border: 0; padding: 3px;">
					<a href="javascript:void(0)" class="easyui-linkbutton btn-primary" onclick="refreshItem()">
					<i class="fa fa-refresh"></i> async</a> 
					<a href="javascript:void(0)" class="easyui-linkbutton btn-primary" onclick="refreshItem()">
					<i class="fa fa-undo"></i> clear</a> 
				</div>
				<div data-options="region:'center'" style="border: 0;">
					<ul class="easyui-tree" id="authTree"></ul>
				</div>
			</div>

		</div>
		<div style="padding:8px;"
			data-options="region:'center',iconCls:'Module-mgr-ico'">
			<div style="margin: 6px 0;">
				<a href="javascript:void(0)" class="easyui-linkbutton btn-primary" onclick="addItem()"><i class="fa fa-plus"></i> Add Item</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton btn-primary" onclick="doSave()"><i class="fa fa-save fa-trash-o fa-lg"></i> Save</a> 
				<div class="btn-group actionbtn">
                    <a href="javascript:;" class="btn btn-primary"><i class="fa fa-file-excel-o"></i> 导入导出</a>
                    <a href="javascript:;" data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="false">
                        <span class="fa fa-caret-down"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:;"><i class="i"></i> 导出Excel</a></li>
                        <li><a href="javascript:;"><i class="i"></i> 下载Excel模板</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;"><i class="i"></i> 导入Excel</a></li>
                    </ul>
                </div>
			</div>
			
			<div class="my-form-group-row" style="">
				<span class="form-group my-form-group" style="width: 38%;">
				&nbsp;&nbsp;权限信息
				</span>
				<span class="form-group my-form-group" style="width: 38%;">
				</span>
			</div>
			<form class="form-horizontal" role="form" style="margin:6px;">
				    <div class="form-group">
				        <label for="authName" class="col-sm-2 control-label">权限名称:</label>
				        <div class="col-sm-10">
				        	<input type="hidden" class="form-control" id="parentId" name="parentId">
				        	<input type="hidden" class="form-control" id="authId" name="authId">
				            <input type="text" class="form-control" id="authName" name="authName" placeholder="请输显示名称">
				        </div>
				    </div>
				    <div class="form-group">
				        <label for="authCode" class="col-sm-2 control-label">权限编码:</label>
				        <div class="col-sm-10">
				            <input type="text" class="form-control" id="authCode" name="authCode" placeholder="请输权限编码">
				        </div>
				    </div>
				    <div class="form-group">
				        <label for="authDesc" class="col-sm-2 control-label">启用:</label>
				        <div class="col-sm-10">
				            <input type="checkbox" style="float: left;" id="enabled" name="enabled" >
				        </div>
				    </div>
				    <div class="form-group" style="width:96%;margin:0 auto;">
				        <label for="authDesc">说明</label>
				        <textarea class="form-control" name="authDesc" id="authDesc"></textarea>
				    </div> 
				</form> 

		</div>
	</div>
</div>

<div class="modal" id="authorities_modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary"
					id="authorities_modal_submit">
					<i class="fa fa-save"></i> Save
				</button>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="parent_select_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            	<!-- <ul class="easyui-tree"
					data-options="url:'../../services/sys/authoritiesService/findRecords/10/1',method:'get',checkbox:true,animate:true">
				</ul> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="parent_select_modal_submit"><i class="fa fa-save"></i> Save</button>
            </div>
        </div>
    </div>
</div>

<script>
var BASE = '../../services/sys/authoritiesService/';
	
var initRegTree = function(itemId) {
	var baseUrl = BASE + 'findAuthoritiesTree';
	var url = baseUrl;
	if (itemId != undefined) {
		url = url + '/' + authId;
	} else{
		url = url + '/0';
	}
	$('#authTree').tree({
		url : url,
		method : 'get',
		fit : true,
		lines:true,
		checkbox:true,
		onBeforeLoad:function(){
		　　    //获取根节点
		　　    var rooNode = $("#authTree").tree('getRoot');
		　　    //调用expand方法
		　　    $("#authTree").tree('expand',rooNode); 
		},onClick: function(node){
			node.authName = node.text;
			node.authId = node.id;
			//node.parentId = pnode.id;
			var pnode = $('#authTree').tree('getParent',node.target);
			
			resetForm();
			setFormValues(node);
		},onLoadSuccess:function(node){
	    },
		/*
		onBeforeLoad: function(node, param){
		}, */
		onBeforeExpand : function(node) {
			if (node) {
				$('#authTree').tree('options').url = baseUrl+"/"+node.id;
			}
		}
	});
}
	
	//过滤
	function doSearch(value) {
		alert('You input: ' + value);
	}
	
	// 点击 Create 按钮，弹出创建产品对话框
    $('#parent_select_btn').on('click', function() {
        var title = '上一级节点选择';
        //NavigationView.renderNavigationModal(title, navigation);
        var $modal = $('#parent_select_modal');
        $modal.find('.modal-title').text(title);
        $('#parent_select_modal').modal('show');
    });
	
	//添加条目，如果parentId为空则是一级
	function addItem() {
		resetForm();
		var node = $('#authTree').tree('getSelected');
		console.warn('add node parent',node);
		if(node!=null){
			node.parentId=node.id;
		}else{
			node = {};
			node.parentId=0;
		}
		
		node.authId=0;
		node.authName='';
		node.authCode='';
		node.authDesc='';
		setFormValues(node);
	}
	
	//.tree-title .fa-remove
	// 点击 Delete 按钮，删除产品
	doRemove = function() {
		var node = $("#authTree").tree("getSelected");
		if(node){
			var params = [{
				authId:node.id
			}];
			
			if (confirm('Do you want to delete this Authorities?')) {
				AuthoritiesService.batchRemoveAuthorities(params,function(){
					$('#authTree').tree('remove', node.target);
				});
				
			}
		}
		return false;
	}
	
	//保存，含新增和修改
	function doSave() {
		var values = getFormValues();
		console.info(values);
		var selected = $('#authTree').tree('getSelected');
		if(values.authId!=0){
			AuthoritiesService.batchUpdateAuthorities([values],function(){
				//更新
				if (selected){
					$('#authTree').tree('update', {
						target: selected.target,
						parentId: values.parentId,
						authDesc: values.authDesc,
						authId:values.authId,
						authName:values.authName,
						authCode:values.authCode,
						text: values.authName//,
						//不用更新id:values.authId
					});
				}
			});
			//提交[values]
		}else{
			var result = AuthoritiesService.batchInsertAuthorities([values]);
			for(var i=0;i<result.obj.length;i++){
				result.obj[i].id = result.obj[i].authId;
				result.obj[i].text = result.obj[i].authName;
			}
			if(selected==null){
				selected = {};
			}
			$('#authTree').tree('append', {
				parent: selected.target,
				data: result.obj
			});
		}
		resetForm();
	}
	
	//重置表单
	function resetForm() {
		var values = {
			authId:0,
			authName:'',
			authCode:'',
			parentId:0,
			authDesc:''
		};
		setFormValues(values);
	}
    filter = function(){
    	/*$('#tt').tree({
			filter: function(q, node){
				return node.text.toLowerCase().indexOf(q.toLowerCase()) >= 0;
			}
		})*/
    	$('#authTree').tree({
            //url: '../services/authorities/authoritiesService/findAuthoritiesList',
            loadFilter: function(data){
                if (data.d){
                    return data.d;
                } else {
                    return data;
                }
            }
        });
    }
    
    /*设置表单值*/
    function getFormValues(){
    	var values={};
    	values.authId=$('input[name="authId"]').val();
    	values.authName=$('input[name="authName"]').val();
    	values.authCode=$('input[name="authCode"]').val();
    	values.parentId=$('input[name="parentId"]').val();
    	values.authDesc=$('#authDesc').val();
    	return values;
    }
    
    /*设置表单值*/
    function setFormValues(values){
    	$('input[name="authId"]').val(values.authId);
    	$('input[name="authName"]').val(values.authName);
    	$('input[name="authCode"]').val(values.authCode);
    	$('input[name="parentId"]').val(values.parentId);
    	$('#authDesc').val(values.authDesc);
    }
    
    $(function() {
		initRegTree();
		console.info('添加一级节点有问题!');
	})
</script>

<style>
	.tree-title .fa-remove:hover{color:#F00;}
	.my-form-group-row{/*border-top:6px #F90 solid;*/border-bottom: 2px #74c557 solid;background:#F0F2F8}
</style>



